<template>
    <div class="login">

        <div class="top">
           <!-- <img src="@/assets/img/logopic.png" width="600" height="80" alt="">-->
        </div>
        <div class="login-box">
            <div class="nav-title">
                <img src="@/assets/img/logopic02.png" width="500" height="60" alt="" class="logo">
                <span>牛海绵状脑病（BSE）风险评估系统</span>
            </div>
            <el-tabs type="border-card">
                <el-tab-pane label="账号登录">
                    <div class="mid">
                        <el-form :model="dataForm" :rules="dataRule" ref="dataForm"
                                 @keyup.enter.native="dataFormSubmit()" status-icon>
                            <el-form-item prop="userName">
                                <el-input class="info" v-model="dataForm.userName" placeholder="帐号"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input class="info" v-model="dataForm.password" type="password"
                                          placeholder="密码"></el-input>
                            </el-form-item>
                            <!-- <el-form-item prop="captcha">
							  <el-row :gutter="20">
								<el-col :span="14">
								  <el-input v-model="dataForm.captcha"
											placeholder="验证码">
								  </el-input>
								</el-col>
								<el-col :span="10"
										class="login-captcha">
								  <img :src="captchaPath"
									   @click="getCaptcha()"
									   alt="">
								</el-col>
							  </el-row>
							</el-form-item> -->
                            <el-form-item>
                                <div class="item-btn"><input type="button" value="登录" @click="dataFormSubmit()"></div>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
              <!--
                <el-tab-pane label="扫码登录">
                    <div class="scan-title">
                        微信登录（微信场景二维码）
                    </div>
                    <div class="mid erbox">
                        <img src="@/assets/img/ercode.png" class="ercode">
                    </div>
                    <div class="scan-sub-title">
                        请使用微信扫描二维码登录
                    </div>
                </el-tab-pane>
                -->
            </el-tabs>
            <div class="bottom">Copyright ◎ 2025 牛海绵状脑病(BSE)风险评估系统</div>
        </div>
        <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}"
                @success="login" />

        <el-dialog title="注册账号"
                   :modal="false"
                   :close-on-click-modal="false"
                   width="700px"
                   top="20px"
                   :visible.sync="registerDialogVisible">
            <el-form :model="registerForm" :rules="registerRules" ref="ruleForm" label-width="100px" class="registerForm">
                <el-form-item label="注册账号" prop="userName">
                    <el-input v-model="registerForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="用户类型" prop="userType">
                    <el-select v-model="registerForm.userType" placeholder="请选择活动区域">
                        <el-option label="区县用户" value="area"></el-option>
                        <el-option label="专家" value="zj"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="省份">
                    <el-col :span="8">
                        <el-form-item prop="province">
                            <el-select v-model="registerForm.provinceId"
                                       placeholder="请选择"
                                       @change="selectProvince">
                                <el-option v-for="province in provinceList"
                                           :key="province.areaId"
                                           :label="province.areaName"
                                           :value="province.areaId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="city">
                            <el-select v-model="registerForm.cityId"
                                       placeholder="请选择"
                                       @change="selectCity">
                                <el-option v-for="city in cityList"
                                           :key="city.areaId"
                                           :label="city.areaName"
                                           :value="city.areaId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="area">
                            <el-select v-model="registerForm.areaId"
                                       placeholder="请选择">
                                <el-option v-for="area in areaList"
                                           :key="area.areaId"
                                           :label="area.areaName"
                                           :value="area.areaId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="账号密码" prop="password">
                    <el-input v-model="registerForm.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="passwordAgian">
                    <el-input v-model="registerForm.passwordAgian"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="registerForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="微信号" prop="wxid">
                    <el-input v-model="registerForm.wxid"></el-input>
                </el-form-item>
                <el-form-item label="证件上传">
                    <mul-pic-upload v-model="registerForm.imgs" />
                </el-form-item>
              <!--
                <el-form-item label-width="0">
                    <div class="item-btn"><input type="button" value="注册" @click=""></div>
                </el-form-item>
                -->
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {
    getUUID
} from '@/utils'
import Verify from '@/components/verifition/Verify'
import {
    encrypt
} from '@/utils/crypto'
import MulPicUpload from '@/components/mul-pic-upload/index.vue'
export default {
    components: {
        MulPicUpload,
        Verify
    },
    data() {
        return {
            registerDialogVisible: false,
            provinceList: [],
            cityList: [],
            areaList: [],
            dataForm: {
                userName: '',
                password: '',
                uuid: '',
                captcha: ''
            },
            registerForm: {
                userName : "",
                password : "",
                passwordAgian : "",
                userType : "area",
                area: '',
                city: '',
                province: '',
                areaId: null,
                cityId: null,
                provinceId: "",
                mobile: "",
                wxid: ""
            },
            registerRules: {
                userName: [{
                    required: true,
                    message: '帐号不能为空',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur'
                }],
                passwordAgian: [{
                    required: true,
                    message: '请确认密码',
                    trigger: 'blur'
                }],
                mobile: [{
                    required: true,
                    message: '手机号不能为空',
                    trigger: 'blur'
                }],
            },
            dataRule: {
                userName: [{
                    required: true,
                    message: '帐号不能为空',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur'
                }],
                captcha: [{
                    required: true,
                    message: '验证码不能为空',
                    trigger: 'blur'
                }]
            },
            captchaPath: ''
        }
    },
    beforeDestroy() {
        document.removeEventListener('keyup', this.handerKeyup)
    },
    created() {
        // this.init();
        this.getCaptcha()

        document.addEventListener('keyup', this.handerKeyup)
    },
    methods: {
        init (id) {
            this.listAreaByParentId().then(({ data }) => {
                this.provinceList = data
            })
        },
        listAreaByParentId (pid) {
            if (!pid) pid = 0
            return this.$http({
                url: this.$http.adornUrl(`/admin/area/listByPid`),
                method: 'get',
                params: this.$http.adornParams({ pid })
            })
        },
        // 选择省
        selectProvince (val) {
            this.registerForm.cityId = null
            this.registerForm.city = ''
            // 获取城市的select
            this.listAreaByParentId(val).then(({ data }) => {
                this.cityList = data
            })
        },
        // 选择市
        selectCity (val) {
            this.registerForm.areaId = null
            this.registerForm.area = ''
            // 获取区的select
            this.listAreaByParentId(val).then(({ data }) => {
                this.areaList = data
            })
        },
        handerKeyup(e) {
            var keycode = document.all ? event.keyCode : e.which
            if (keycode === 13) {
                this.dataFormSubmit()
            }
        },
        // 提交表单
        dataFormSubmit() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    this.$refs.verify.show()
                }
            })
        },
        login(verifyResult) {
            if (this.isSubmit) {
                return
            }
            this.isSubmit = true
            this.$http({
                url: this.$http.adornUrl('/adminLogin'),
                method: 'post',
                data: this.$http.adornData({
                    'userName': this.dataForm.userName,
                    'passWord': encrypt(this.dataForm.password),
                    'captchaVerification': verifyResult.captchaVerification
                })
            }).then(({
                data
            }) => {
                this.$cookie.set('Authorization', data.accessToken)
                this.$router.replace({
                    name: 'home'
                })
            }).catch(() => {
                this.isSubmit = false
            })
        },
        // dataFormSubmit () {
        //   this.$refs['dataForm'].validate((valid) => {
        //     if (valid) {
        //       this.$http({
        //         url: this.$http.adornUrl('/login?grant_type=admin'),
        //         method: 'post',
        //         data: this.$http.adornData({
        //           'principal': this.dataForm.userName,
        //           'credentials': this.dataForm.password,
        //           'sessionUUID': this.dataForm.uuid,
        //           'imageCode': this.dataForm.captcha
        //         })
        //       }).then(({ data }) => {
        //         this.$cookie.set('Authorization', 'bearer' + data.access_token)
        //         this.$router.replace({ name: 'home' })
        //       }).catch(() => {
        //         this.getCaptcha()
        //       })
        //     }
        //   })
        // },
        // 获取验证码
        getCaptcha() {
            this.dataForm.uuid = getUUID()
            this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
        }
    }
}
</script>

<style lang="scss">
.nav-title{
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bolder;
    //color: #FFFFFF;
    .logo{
        width: 140px;
    }
}
.login {
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/login-bg.jpg) no-repeat;
    background-size: 150% 100%;
    position: fixed;
}

.login .login-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100% - 150px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login .login-box .top {
    margin-bottom: 30px;
    text-align: center;
}

.login .login-box .top .logo {
    font-size: 0;
    max-width: 50%;
    margin: 0 auto;
}

.login .login-box .top .company {
    font-size: 16px;
    margin-top: 10px;
}
.top{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
.login .login-box .mid {
    font-size: 14px;
    width: 400px;
}

.login .login-box .mid .item-btn {
    margin-top: 20px;
}

.login .login-box .mid .item-btn input {
    border: 0;
    width: 100%;
    height: 40px;
    box-shadow: 0;
    background: #1f87e8;
    color: #fff;
    border-radius: 3px;
}

.info {
    width: 410px;
}

.erbox {
    display: flex;
    justify-content: center;
    align-items: center;

    .ercode {
        width: 220px;
        height: 220px;
    }
}

.login-captcha {
    height: 40px;
}

.login .login-box .bottom {
    position: absolute;
    bottom: 10%;
    width: 100%;
    color: #111111;
    font-size: 12px;
    text-align: center;
}
.registerForm{
    width: 100%;
}
.registerForm .item-btn {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.registerForm .item-btn input {
    border: 0;
    width: 60%;
    height: 40px;
    box-shadow: 0;
    background: #1f87e8;
    color: #fff;
    border-radius: 3px;
}
.scan-title{
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}
.scan-sub-title{
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}
.register-btn{
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #1f87e8;
    span{
        cursor: pointer;
    }
}
</style>
